<template>
  <div class="micro-app-container">
    <!-- 微应用加载状态 -->
    <div v-if="isLoading" class="loading">
      <div class="spinner"></div>
      <p>加载中...</p>
    </div>
    
    <!-- 微应用挂载点 -->
    <div id="micro-container"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const isLoading = ref(true)
const route = useRoute()

// 监听微应用加载状态
onMounted(() => {
  // 模拟加载状态
  const timer = setTimeout(() => {
    isLoading.value = false
    clearTimeout(timer)
  }, 500)
  
  // 监听微应用加载完成事件
  window.addEventListener('micro-app-loaded', () => {
    isLoading.value = false
  })
})
</script>

<style scoped>
.micro-app-container {
  padding: 20px;
  min-height: 400px;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #165DFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
